<template>
  <view>
    <u-popup :show="show"
             mode="bottom"
             :bgColor="'rgba(0,0,0,0)'"
             @close="close" @confirm="confirm">
      <view class="popup">
        <view class="popup-title">{{ $i18n.zhToGlobal("基本资料") }}</view>
        <view
            class="picker">
          <view
              class="bl-box">
            <view style="text-align: center;">
              <view @click="selectAvatar()" style="display: inline-block;">
                <kt-avatar
                    class="avatar"
                    size="220rpx"
                    :src="viewSrc?viewSrc:$kt.file.visit(userAccount.fileIdOfAvatar)"
                ></kt-avatar>
              </view>
            </view>
            <view style="height: 30rpx;"></view>
            <!-- 昵称 -->
            <view style="padding: 0 50rpx 0 50rpx;box-sizing: border-box;">
              <input
                  class="input"
                  @blur="nicknameBlur"
                  @focus="nicknameFocus"
                  type="text"
                  :adjust-position="false"
                  :placeholder="$i18n.zhToGlobal('昵称')"
                  v-model="userAccount.nickname"
              ></input>
            </view>
          </view>
          <view
              v-if="!isNickenameFocus"
              style="height: 30px;"></view>
          <!-- 性别 -->
          <view
              v-if="!isNickenameFocus">
            <view class="gender-box">
              <view class="gender-item" :class="{'gender-item-selected':userAccount.genderCode=='male'}"
                    :style="userAccount.genderCode=='male'?'background-color: #409EFF;':''"
                    @click="userAccount.genderCode='male'">{{ $i18n.zhToGlobal("男") }}
              </view>
              <view class="gender-item" :class="{'gender-item-selected':userAccount.genderCode=='female'}"
                    :style="userAccount.genderCode=='female'?'background-color: rgba(255,0,0,.6);':''"
                    @click="userAccount.genderCode='female'">{{ $i18n.zhToGlobal("女") }}
              </view>
            </view>
          </view>
          <view
              v-if="!isNickenameFocus"
              style="height: 30px;"></view>
          <!-- 个性签名 -->
          <view
              v-if="!isNickenameFocus"
              style="padding: 0 50rpx 0 50rpx;">
            <view class="input-box">
                            <textarea
                                maxlength="100"
                                :adjust-position="false"
                                class="input textarea"
                                type="textarea"
                                :placeholder="$i18n.zhToGlobal('个性签名')"
                                v-model="userAccount.introduction"
                            ></textarea>
            </view>
          </view>

        </view>


        <view style="height: 10px;"></view>
        <kt-button
            v-if="!isNickenameFocus"
            @click="submit()"
            ref="confirmBtn"
        >{{ $i18n.zhToGlobal("确定") }}
        </kt-button>
        <view style="height: 10px;"></view>
        <kt-keyboard-size
            ref="keyboardSize"
        ></kt-keyboard-size>
      </view>
    </u-popup>
  </view>

</template>

<script>
import makeFriends from '@/js/makeFriends/index.js';
import KtKeyboardSize
  from "../../../uni_modules/kantboot-framework-uniapp/components/kt-keyboard-size/kt-keyboard-size.vue";

export default {
  components: {
    KtKeyboardSize
  },
  data() {
    return {
      show: false,
      userAccount: {},
      viewSrc: '',
      isNickenameFocus: false
    }
  },
  created() {

  },
  mounted() {
    this.list = makeFriends.getCharacteristics();
    console.log(JSON.stringify(this.list));
  },
  methods: {
    nicknameBlur() {
      this.isNickenameFocus = false;
    },
    nicknameFocus() {
      this.isNickenameFocus = true;
    },
    selectAvatar() {
      console.log('selectAvatar');
      // this.$kt.image.toImageClip().then(res=>{
      // }).catch(err=>{
      // });
      // uniapp选择图片
      uni.chooseImage({
        count: 1, //默认9
        success: (res) => {
          // console.log(res);
          // this.imgList = res.tempFilePaths;
          // console.log(this.imgList);
          console.log(res.tempFilePaths[0]);
          this.$kt.image.toImageClip(res.tempFilePaths[0], 300, 300).then(res => {
            this.viewSrc = res;
          }).catch(err => {
          });

        }
      })
    },
    async submit() {
      this.$refs.confirmBtn.loading(null, 999999)
      if (this.viewSrc) {
        await new Promise((resolve, reject) => {
          this.$request.uploadFile(
              {
                // filePath:this.viewSrc,
                data: {
                  file: this.viewSrc,
                  groupCode: 'userAvatar',
                },
                stateSuccess: res => {
                  console.log(res);
                  this.userAccount.fileIdOfAvatar = res.data.id;
                  resolve("");
                },
                stateError: err => {
                  console.log(err);
                  reject("");
                }
              });
        });

      }
      await this.$request.post('/user-account-web/userAccount/editCommonInfoSelf', {
        data: {
          fileIdOfAvatar: this.userAccount.fileIdOfAvatar,
          nickname: this.userAccount.nickname,
          genderCode: this.userAccount.genderCode,
          introduction: this.userAccount.introduction,
        }
      }).then(res => {
        this.$kt.userAccount.requestSelf();
        this.$refs.confirmBtn.success(res.msg);
        this.close();
      }).catch(err => {
        this.$refs.confirmBtn.error(res.errMsg);
      })
    },
    open(userAccount) {
      this.viewSrc = '';
      this.userAccount = JSON.parse(JSON.stringify(userAccount));
      this.show = true;
    },
    close() {
      this.show = false;
    },
    confirm() {
      this.close();
      this.$emit('confirm', this.selectedYear);
    },
    bindYearChange(e) {
      this.selectedYearIndex = e.detail.value;
      this.selectedYear = this.years[this.selectedYearIndex];
    }
  }
}
</script>

<style lang="scss" scoped>
.avatar:active {
  transform: scale(0.9);
}

.popup {
  padding: 20rpx 40rpx 20rpx 40rpx;
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  box-sizing: border-box;
}

.popup-title {
  padding: 20rpx;
  font-size: 34rpx;
  font-weight: bold;
  text-align: left;
  letter-spacing: 2rpx;
}

.picker {
  text-align: center;
  padding: 10rpx;
  box-sizing: border-box;
}

.bl-box {
  text-align: left;
  width: 100%;

  .bl-box-item {
    display: inline-block;
    margin: 10rpx;
    padding: 28rpx;
    border-radius: 20rpx;
    color: #333;
    box-sizing: border-box;
    background-color: #f5f5f5;

  }

  .bl-box-item-selected {
    background-color: #333;
    color: #fff;
  }
}

.input {
  width: 100%;
  height: 80rpx;
  padding: 0 20rpx;
  box-sizing: border-box;
  border-radius: 20rpx;
  background-color: #f5f5f5;
  font-size: 28rpx;
  text-align: center;
  letter-spacing: 2rpx;
}

.textarea {
  width: 100%;
  min-height: 150rpx;
  padding: 20rpx;
  box-sizing: border-box;
  text-align: left;
}

.gender-box {
  .gender-item {
    padding: 20rpx;
    box-sizing: border-box;
    border-radius: 30rpx;
    display: inline-block;
    width: calc(50% - 40rpx);
    color: #333;
    margin-left: 20rpx;
    background-color: #f5f5f5;
  }

  .gender-item-selected {
    color: #fff;
    background-color: #333;
  }
}

</style>

